import { defineComponent, inject, onMounted, ref, computed } from 'vue';
import { useUserInfoStore } from '@/domain/correction/hooks/login';
import { router } from '../../router';
import { Field, Checkbox, Button, NoticeBar, Toast, Icon, ConfigProvider } from 'vant';
import Styles from './login.module.scss';
import { getCookie, setCookie } from '@/utils/cookies';
import CryptoJS from 'crypto-js';

export default defineComponent({
  name: 'Login',
  setup() {
    const store = useUserInfoStore();
    const isLogin = ref(false);
    const checked = ref(true);
    const styleStr = ref('background:none;padding-left: 0px; border-bottom: 1px solid rgba(153, 153, 153, 0.3); font-family: none;');
    const worker_id = ref('');
    const password = ref('');
    const teacher_id = ref('');
    const theme = {
      fieldInputTextColor: '#2C2E47'
    };
    const isLoginDidabled = computed(() => {
      return worker_id.value && password.value;
    });
    const isRegDisabled = computed(() => {
      return isLoginDidabled.value && teacher_id.value;
    });
    onMounted(() => {
      worker_id.value = getCookie('correct_worker_id') || '';
      password.value = getCookie('correct_password') || '';
    });
    const toLogin = async () => {
      let info = await store.myuserLogin({
        worker_id: worker_id.value,
        password: aesEncrypt()
      });
      if (info.code === 0) {
        isSetCookie();
        router.push({ path: '/classList', replace: false });
      } else if (info.code === 3005) {
        isSetCookie();
        isLogin.value = true;
      } else {
        Toast(info.msg);
      }
    };

    const aesEncrypt = () => {
      const key = CryptoJS.enc.Utf8.parse('aE1$dE1#gR3$cB0!rF1@eI2!cB3*oT2~'); // 秘钥
      const iv = CryptoJS.enc.Utf8.parse('aE1$dE1#gR3$cB0!'); // 秘钥偏移量
      const timeStamp = parseInt(new Date().getTime() / 1000 + ''); // 秒级时间戳
      const text = CryptoJS.enc.Utf8.parse(password.value + '_' + timeStamp); // 加密前字符串
      const aesPassword = CryptoJS.AES.encrypt(text, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      // console.log(''+aesPassword)
      return '' + aesPassword;
    };

    const isSetCookie = () => {
      setCookie('correct_worker_id', worker_id.value);
      setCookie('correct_password', checked.value ? password.value : '');
    };
    const toRegister = async () => {
      let info = await store.myuserRegister({
        worker_id: worker_id.value,
        password: aesEncrypt(),
        teacher_id: teacher_id.value
      });
      if (info.code === 0) {
        router.push({ path: '/classList', replace: false });
      } else {
        Toast(info.msg);
      }
    };

    return () => (
      <ConfigProvider theme-vars={theme}>
        <div>
          {!isLogin.value ? (
            <div class={'w-screen h-screen bg-cover ' + Styles['login-box']}>
              <div class={Styles['wel']}>
                <p>欢迎使用</p>
                <p>希望学批改工具</p>
              </div>
              <div>
                <p class={Styles['login-label']} style="margin-top: 4.5rem;">
                  工号
                </p>
                <Field id="van-field-1-input" v-model={worker_id.value} label="" placeholder="请输入工号" style={styleStr.value} />
                <p class={Styles['login-label']} style="margin-top: 2.2rem;">
                  密码
                </p>
                <Field id="van-field-2-input" v-model={password.value} label="" type="password" placeholder="请输入密码" style={styleStr.value} />
                <Checkbox class={Styles['rem-pass']} v-model={checked.value} icon-size="1.5rem">
                  {{ default: () => <span style="color: #666666; font-family: PingFangSC-Regular, PingFang SC; font-size: 1.4rem">记住密码</span> }}
                </Checkbox>
              </div>
              <Button
                class={Styles['login-btn']}
                style="margin-top: 9.1rem;"
                type="primary"
                block
                disabled={!isLoginDidabled.value}
                onClick={() => {
                  toLogin();
                }}
              >
                登录
              </Button>
            </div>
          ) : (
            <div class={'w-screen h-screen bg-cover ' + Styles['login-confirm']}>
              <NoticeBar style="line-height: 1.8rem" color="#277DFF" background="rgba(39, 125, 255, 0.1)" scrollable={false} wrapable={true}>
                <div style="display: flex; ">
                  <Icon style="margin:0.2rem 0.6rem 0 0" name="info" />
                  <span style="font-size: 1.2rem; font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;">
                    首次登录批改移动端，需要确认手机号码密码是否正确，并绑定一次教师ID，绑定后无需再次绑定，教师ID可以在批改PC端-头像-个人信息处查询。
                  </span>
                </div>
              </NoticeBar>
              <div class={Styles['login-padding']}>
                <p class={Styles['login-label']} style="margin-top: 12.5rem;">
                  工号确认
                </p>
                <Field v-model={worker_id.value} label="" placeholder="请输入工号" style={styleStr.value} readonly disabled />
                <p class={Styles['login-label']} style="margin-top: 2.2rem;">
                  密码确认
                </p>
                <Field v-model={password.value} label="" placeholder="请输入密码" style={styleStr.value} readonly disabled />
                <p class={Styles['login-label']} style="margin-top: 2.2rem;">
                  教师ID
                </p>
                <Field v-model={teacher_id.value} label="" type="digit" placeholder="请输入教师ID" style={styleStr.value} />
                <Button
                  type="primary"
                  block
                  class={Styles['login-btn']}
                  style="margin-top: 4.5rem;"
                  disabled={!isRegDisabled.value}
                  onClick={() => {
                    toRegister();
                  }}
                >
                  绑定
                </Button>
              </div>
            </div>
          )}
        </div>
      </ConfigProvider>
    );
  }
});
